import React, { memo } from "react"
import styled from "@emotion/styled"
import { WalletAccountType } from "@/features/business/WithdrawAccounts/useGetAccounts"
import { paymentList } from "@/pages/WithdrawAccounts/constants"
import RenderIcon from "./RenderIcon"

const CardWrapper = styled.div<{ isSelected: boolean }>`
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: ${({ isSelected }) => (isSelected ? "2rem" : "0")};
    background-color: ${({ isSelected }) => (isSelected ? "#fff" : "transparent")};
    border: ${({ isSelected }) => (isSelected ? "2rem #FF1F57 solid" : "none")};
`

const Card = styled.div`
    width: 100%;
    height: 76rem;
    display: flex;
    align-items: center;
    border-radius: 10rem;
    padding: 16rem;
    overflow: hidden;
    & > img {
        width: 44rem;
        height: 44rem;
        border-radius: 50%;
        border: 1rem solid #f9f9fa;
    }
`

const AccountCardInfo = styled.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin: 0;
    padding-left: 12rem;
    color: #f9f9fa;
    gap: 10rem;
`

const Name = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 14rem;
    line-height: 100%;
`

const Number = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Gilroy;
    font-weight: 700;
    font-size: 18rem;
    line-height: 100%;
    gap: 8rem;
`

const Log = styled.div`
    width: 42rem;
    height: 42rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #fff;
`

interface AccountCardProps {
    data: WalletAccountType | undefined
    onClick?: () => void
    className?: string
    isSelected?: boolean
}

const AccountCard: React.FC<AccountCardProps> = ({
    data = {},
    className = "",
    isSelected = false,
    onClick,
}) => {
    // @ts-ignore
    const { channel_name, account, status, img } = data || {}
    const { cardBgColor, displayName } =
        paymentList.find((item) => item.name === channel_name) || {}

    if (status === 2) {
        return null
    }

    return (
        <CardWrapper isSelected={isSelected}>
            <Card
                className={className}
                onClick={() => {
                    if (onClick) onClick()
                }}
                style={{
                    background:
                        cardBgColor || "linear-gradient(96.98deg, #69728c 0%, #383838 100%)",
                }}
            >
                <Log>
                    <RenderIcon icon={img} />
                </Log>
                <AccountCardInfo>
                    <Name>{displayName}</Name>
                    <Number>
                        <span>{account}</span>
                        {/* <Svg src="pages/WithdrawAccounts/eye_visible.svg" /> */}
                    </Number>
                </AccountCardInfo>
            </Card>
        </CardWrapper>
    )
}

export default memo(AccountCard)
